<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="name">我是id的获取目标</div> 
    <div class="name">我是class为name的1</div>
    <div class="name">我是class为name的2</div>
    <div class="name">我是class为name的3</div>
    <div class="name">我是class为name的4</div>
    <div class="name">我是class为name的5</div>
    <div>我是默认的标签获取目标</div>
    <input type="checkbox" name="hobby" id="" value="basketball">篮球
    <input type="checkbox" name="hobby" id="" value="pingpong">乒乓
    <input type="checkbox" name="hobby" id="" value="football">足球
    <input type="checkbox" name="hobby" id="" value="voterball">排球
    <div class="con">
        <p class="title">你好1</p>
        <p class="title">你好2</p>
        <p class="title">你好3</p>
        <p class="title">你好4</p>
        <p class="title">你好5</p>
    </div>
    <script>
        var idName=document.getElementById("name");//单个
        var className=document.getElementsByClassName("name");//数组 HTMLCollection
        var name=document.getElementsByName("hobby");//数组 
        var query=document.querySelector(".con>.title");//单个
        var queryAll=document.querySelectorAll(".con>.title");//数组 nodelist
        var html=document.documentElement;
        var head=document.head;
        var body=document.body;
        var title=document.title;
        // console.log(idName);
        console.log(className);
        // console.log(name);
        // console.log(query);
        console.log(queryAll);
        // console.log(html);
        // console.log(head);
        // console.log(body);
        // console.log(title);


        //dom获取
        //属性的 [ 自定义属性  ,自有属性   ]

        获取节点
        属性操作
        自由属性
        自定义属性
    </script>
</body>
</html>